/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <multi-grid-col
    :name="name"
    :scope="scopeId"
    :class="scopeId"
    :span="componentAttr.span"
    :offset="componentAttr.offset"
    :order="componentAttr.order"
    :label="label"
    :icon="icon"
  >
    <slot></slot>
  </multi-grid-col>
</template>

<script lang='ts' setup>
import { ref, reactive, onUnmounted, watch, onMounted } from 'vue';
import { BreakpointManager } from '@hadss/web_adaptive_layout_ui';
import {
  getBreakpointsAttr,
  getbreakpointManager,
} from '../../utils/getBreakpoint';
import { getScopeId } from '../../utils/getScopeId';

type GridColPropsName = 'span' | 'offset' | 'order';

const props = defineProps({
  name: [String, Number],
  span: [String, Number, Object],
  offset: [String, Number, Object],
  order: [String, Number, Object],
  label: String,
  icon: String,
});

let breakpointManager = new BreakpointManager();
const scopeId = getScopeId();
const parentElement = ref<HTMLElement | null>(null);

const attrNameArr = ['span', 'offset', 'order'];
const componentAttr = reactive({
  span: 1,
  offset: 0,
  order: 0,
});

const getCurrentAttr = (): void => {
  attrNameArr.forEach((item) => {
    if (props[item as GridColPropsName] !== undefined) {
      componentAttr[item as GridColPropsName] = getBreakpointsAttr(
        props[item as GridColPropsName],
        breakpointManager
      );
    }
  });
};

watch(
  () => props,
  () => {
    getCurrentAttr();
  },
  {
    deep: true,
  }
);

let unsubscribe = breakpointManager.subscribeToBreakpoint(() => {
  getCurrentAttr();
});

const subscribeToBreakpoint = () => {
  const breakpointValue = JSON.parse(parentElement.value.getAttribute('breakpointvalue'));
  const breakpointReference = parentElement.value.getAttribute('breakpointreference');
  breakpointManager = getbreakpointManager(
    breakpointReference,
    breakpointValue,
    parentElement.value.getAttribute('scope')
  );
  unsubscribe = breakpointManager.subscribeToBreakpoint((bp) => {
    getCurrentAttr();
  });
};

onMounted(() => {
  parentElement.value = document.querySelector(`.${scopeId}`).parentElement;
  parentElement.value?.addEventListener('gridRowVue3Mounted', subscribeToBreakpoint);
});

onUnmounted(() => {
  unsubscribe();
  breakpointManager.destroy();
  parentElement.value?.removeEventListener('gridRowVue3Mounted', subscribeToBreakpoint);
});
</script>